<template>
  <view class="main-view">
    <view style="background: #EEE; border-radius: 0px 0px 30rpx 30rpx;">
      <eui-sheet drag-position="bottom" @open="onOpen" @close="onClose">
        <view style="background: #F00; width: 100%; height: 300rpx;">
        </view>
      </eui-sheet>
    </view>
    <view style="text-align: left; margin-top: 30rpx;">
      <view style="display: inline-block; background: #EEE; border-radius: 0px 30rpx 30rpx 0px; font-size: 0px;">
        <eui-sheet drag-position="right" expand-threshold="30px">
          <view style="background: #0F0; width: 500rpx; height: 200rpx;">
          </view>
          <template v-slot:drag>
            <view style="padding: 0px 20rpx;">
              <view style="width: 30rpx; height: 30rpx; background: #F00; border-radius: 50%;"></view>
              <view style="width: 30rpx; height: 30rpx; background: #F00; border-radius: 50%;"></view>
              <view style="width: 30rpx; height: 30rpx; background: #F00; border-radius: 50%;"></view>
            </view>
          </template>
        </eui-sheet>
      </view>
    </view>
    <view style="text-align: right; margin-top: 30rpx;">
      <view style="display: inline-block; background: #EEE; border-radius: 30rpx 0px 0px 30rpx;">
        <eui-sheet drag-position="left" expand-threshold="60rpx">
          <view style="background: #00F; width: 500rpx; height: 200rpx;">
          </view>
          <template v-slot:drag>
            <view style="width: 30rpx; background: #0FF; margin: 0px 20rpx;">拉开查看</view>
          </template>
        </eui-sheet>
      </view>
    </view>
    <view style="position: absolute; bottom: 0; left: 0; width: 100%;">
      <view style="background: #EEE; border-radius: 30rpx 30rpx 0px 0px;">
        <eui-sheet
            drag-position="top"
            auto-open-close="true"
            drag-block-con-height="50rpx">
          <view style="background: pink; width: 100%; height: 900rpx;">
          </view>
        </eui-sheet>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      drawer: false,
    }
  },
  methods: {
    open() {
      this.drawer = true;
    },
    onOpen() {
      console.log('open')
    },
    onClose() {
      console.log('close')
    }
  }
}
</script>

<style scoped>
.main-view {
  width: 100%;
  height: 100vh;
  background: #ffffff;
  position: relative;
}
</style>
